<!--
 * @Description:
 * @Author: william
 * @Date: 2025-03-04 19:40:34
 * @LastEditors: william
 * @LastEditTime: 2025-03-17 19:12:22
-->
<template>
  <el-select v-model="id" :placeholder="getPlaceholder()" :="$attrs">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script setup>
const props = defineProps({
  placeholder: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  }
})

const id = defineModel({
  type: String,
  default: ''
})
const optionLabel = defineModel('label', {
  type: String,
  default: ''
})
const options = defineModel('list', {
  type: Array,
  default: () => []
})

watch(
  [() => id.value, () => options.value],
  nv => {
    optionLabel.value = options.value.find(item => item.value === nv[0])?.label
  },
  {
    deep: true
  }
)

onMounted(() => {
  getOptions()
})

// 查询租户下拉列表
const getOptions = () => {
  g_api.userCenter.apiTenantDropList().then(({ code, data }) => {
    if (code === '200' && data) {
      options.value = data
    }
  })
}

const getPlaceholder = _ => {
  return (
    props.placeholder ||
    g_rules.zhAndEnShowMsg(g_t('public.pleaseSelect'), props.label)
  )
}
</script>

<style scoped lang="scss"></style>
